<template>
  <div class="main">
    <el-table
        :data="message"
        style="width: 100%;height: 340px;">
      <el-table-column
          type="index"
          :index="indexMethod">
      </el-table-column>
      <el-table-column
          prop="vaccinesName"
          label="疫苗信息"
          width="180">
      </el-table-column>
      <el-table-column
          prop="vaccinationDate"
          label="接种日期"
          width="180">
      </el-table-column>
      <el-table-column
          prop="address"
          label="接种地址">
      </el-table-column>
      <el-table-column
          prop="isDetermine"
          label="是否确认接种">
      </el-table-column>
      <el-table-column
          fixed="right"
          label="操作"
          width="100">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small">确认接种</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        small
        layout="prev, pager, next"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="allInfo.pageNum"
        :page-size="allInfo.pageSize"
        :total="allInfo.total">
    </el-pagination>
    <div style="width: 100%;border-bottom: 1px solid #eaeaea"></div>
    <div style="margin-top: 20px">
      <el-button @click="drawer = true" type="warning" plain style="margin-left: 16px;float: right">
        记录宝宝信息
      </el-button>
    </div>
    <el-drawer
        title="记录疫苗接种信息"
        :visible.sync="drawer"
        :direction="direction"
        :before-close="handleClose">
      <img src="../assets/e7ea694c309e8daa74b7e5e0afd4584c.jpeg" height="150px">
      <div style="width: 80%;margin-left: 15px">
        <el-form label-width="80px" style="padding: 50px">
          <el-form-item label="疫苗信息">
            <el-input v-model="formLabelAlign.vaccinesName"></el-input>
          </el-form-item>
          <el-form-item label="接种地址">
            <el-input v-model="formLabelAlign.address"></el-input>
          </el-form-item>
          <el-form-item label="接种日期">
            <el-date-picker
                v-model="formLabelAlign.vaccinationDate"
                type="date"
                placeholder="选择日期">
            </el-date-picker>
          </el-form-item>
          <el-button style="float: right;" @click.prevent.native="upload">确认提交</el-button>
        </el-form>
      </div>
    </el-drawer>
  </div>
</template>

<script>
export default {
  name: "Vaccines",
  data: function () {
    return {
      page: {
        pageNum: 1,
        pageSize: 5
      },
      message: [],
      allInfo: {},
      drawer: false,
      direction: 'rtl',
      formLabelAlign: {
        vaccinesName: "",
        address: "",
        vaccinationDate: null
      }
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    handleClick(row) {
      this.$http.put("/vaccines/sureVaccines/"+row.id).then(data=>{
        if(data.code==200){
          this.$message.success("您已确认疫苗接种")
          this.getData()
        }
      })
    },
    upload() {
      //console.log(this.formLabelAlign)
      if (this.formLabelAlign.vaccinationDate == null || this.formLabelAlign.address == "" || this.formLabelAlign.vaccinesName == "") {
        this.$message.error("请输入全部信息")
        return
      }
      this.formLabelAlign.vaccinationDate = this.format(this.formLabelAlign.vaccinationDate)
      this.$http.post("/vaccines/insertVaccines", this.formLabelAlign).then(data => {
        if (data.code == 200) {
          this.formLabelAlign = {
            vaccinesName: "",
            address: "",
            vaccinationDate: null
          }
          this.$message.success("添加成功")
          this.getData()
          this.drawer = false
        }
      })
    },
    format(date) {
      var Dates = date;
      var Y = Dates.getFullYear();
      var M = Dates.getMonth() + 1;
      var D = Dates.getDate();
      return Y + "-" + M + "-" + D
    },
    getData() {
      this.$http.post("/vaccines/pageSelectInfo", this.page).then(data => {
        let res = data.data.list
        for (let i = 0; i < res.length; i++) {
          res[i].isDetermine = res[i].isDetermine == true ? '是' : '否'
          res[i].vaccinationDate = res[i].vaccinationDate.split(" ")[0]
        }
        this.message = res
        this.allInfo = data.data
      })
    },
    // 监听页数变化
    handleSizeChange(pageSie) {
      this.page.pageSize = pageSie
      this.getData()
    },
    // 监听当前页变化
    handleCurrentChange(PageNum) {
      this.page.pageNum = PageNum
      this.getData()
    },
    indexMethod(index) {
      return index + 1;
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
          .then(() => {
            done();
          })
          .catch(() => {
          });
    },
  }
}
</script>

<style scoped>
.main {
  width: 980px;
  float: right;
}
</style>